<template>
  <div>
    <v-chart :options="option" style="height:17vh;" />
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

export default {
  components: {
    'v-chart': ECharts
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    data(val) {
      let titles = []
      let yers = []
      let series =  []
      for(let i = 0; i < val.length; i++) {
        titles.push(val[i].name)
        if (i == 0) {
          let data = val[i].data
          for(let l = 0; l < data.length; l++) {
            yers.push(data[l].date_year)
          }
        }

        let data = val[i].data
        let seriesData = []
        for(let l = 0; l < data.length; l++) {
          seriesData.push(data[l].num)
        }
        series.push({
            name: val[i].name,
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: seriesData
          })
      }
      this.option.legend.data = titles
      this.option.xAxis[0].data = yers
      this.option.series = series
      console.log(this.data)
      console.log(this.option)
    }
  },
  mounted() {
    let option = {
      legend: {
          right: '60%',
          width: '40%',
          top: '-5%',
          textStyle: {
            color: '#ffffff',
            fontSize: '.5rem',
          },
          data: []
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      grid: {
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true,
          height: "70%",
          width: "40%"
      },
      xAxis: [
          {
              axisLine: {  //这是x轴文字颜色
                lineStyle: {
                    color: "#fff",
                },
              },
              type: 'category',
              boundaryGap: false,
              data: [],
              axisLabel: {
              show: true,
              textStyle: {
                  fontSize: 8,
              }
          }
          }
      ],
      yAxis: [
          {
            splitLine:{show:  false }, //去除网格线
              axisLine: {  //这是x轴文字颜色
                lineStyle: {
                    color: "#fff",
                },
              },
              type: 'value',
              axisLabel: {
              show: true,
              textStyle: {
                  fontSize: 8,
              }
          }
          }
      ],
      series: [
          // {
          //     name: '直接访问',
          //     type: 'line',
          //     stack: '总量',
          //     areaStyle: {},
          //     data: [320, 332, 301, 334, 390, 330, 320]
          // },
          // {
          //     name: '搜索引擎',
          //     type: 'line',
          //     stack: '总量',
          //     // label: {
          //     //     normal: {
          //     //         show: true,
          //     //         position: 'top',
          //     //         fontSize: '8px',
          //     //         color: '#fff'
          //     //     },
          //     // },
          //     areaStyle: {},
          //     data: [820, 932, 901, 934, 1290, 1330, 1320]
          // }
      ]
  };
  this.option = option

  },
  data() {
    return {
      option: {}
    }
  }
}
</script>
